<template>
    <el-container class="container_main">
        <el-header class="nav_header">
            <el-link type="primary" class="left_nav">主要链接</el-link>
            <div class="nav_main">
                <el-menu :default-active="active" mode="horizontal" @select="handleSelect">
                    <el-menu-item class="nav_link"
                            v-for="link in links"
                            :key="link.id"
                            :index="link.id"
                    >{{ link.name }}
                    </el-menu-item>
                </el-menu>
            </div>
            <el-switch
                v-model="value"
                active-color="#13ce66">
            </el-switch>
        </el-header>
        <el-main class="center_main">
            <Avatar :value="value" v-if="active === 'home'"/>
            <Article v-if="active === 'posts'"/>
        </el-main>
    </el-container>
</template>

<script>
import Avatar from './Avatar.vue'
import Article from './Article.vue';

export default {
    data() {
        return {
            active: 'posts',
            value: false,
            links: [
            {
                id: 'home',
                name: '主页',
            },
            {
                id: 'posts',
                name: '文章',
            },
            {
                id: 'tags',
                name:'分类',
            },
            {
                id: 'life',
                name: '生活',
            },
            {
                id: 'talk',
                name: '留言板',
            },
            {
                id: 'about',
                name: '关于我',
            },
            ],
        }   
    },
    components: {
        Avatar,
        Article
    },
    methods: {
      handleSelect(arc_key) {
        this.active = arc_key
      }
    }
}
</script>

<style scoped>
.container_main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.nav_header {
    width: 100%;
    height: 50px;
    padding: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.left_nav {
    margin-left: 20px;
    font-size: 18px;
    font-weight: 700;
}
.nav_main {
    margin: 0 auto;
}
.nav_link {
    margin-left: 4px;
    font-size: 18px;
}
.active {
    font-weight: 700;
}
.center_main {
    width: 100%;
    flex: 1;
}
/deep/ .el-main {
    padding: 0;
}
</style>